<template>
  <t-dialog :visible.sync="visible" header="编 辑" :width="'50%'" @confirm="handleConfirm" @cancel="handleCancel"
    @close="handleCancel">
    <t-form ref="formRef" :data="form" :rules="rules">
      <t-form-item label="名 称" required name="name">
        <t-input v-model="form.name" placeholder="请输入" clearable />
      </t-form-item>
      <t-form-item label="分 类" required name="goodsCategoryId">
        <t-cascader v-model="form.parentId" :options="categoryOptions" clearable placeholder="请选择" />
      </t-form-item>
      <t-form-item label="货 号" required name="goodsSn">
        <t-input v-model="form.goodsSn" placeholder="请输入" clearable /> <t-button
          :disabled="form.goodsSn !== null && form.goodsSn !== undefined && form.goodsSn !== ''"
          @click="goodsSnGen">自动生成</t-button>
      </t-form-item>
      <t-form-item label="起售数量">
        <t-input-number v-model="form.startSaleNum" :min="0" clearable />
      </t-form-item>
      <t-form-item label="限 购">
        <t-input-number v-model="form.quota" :min="0" clearable />
      </t-form-item>
      <t-form-item label="计量单位">
        <t-select v-model="form.unit" clearable>
          <t-option v-for="(item, index) in unitOptions" :key="index" :value="item.value" :label="item.label" />
        </t-select>
      </t-form-item>
      <t-form-item label="库存减少方式">
        <t-select v-model="form.subStock" clearable>
          <t-option v-for="(item, index) in stockReduceOptions" :key="index" :value="item.value" :label="item.label" />
        </t-select>
      </t-form-item>
      <t-form-item label="物 流">
        <t-select v-model="form.delivery" clearable>
          <t-option v-for="(item, index) in logisticsOptions" :key="index" :value="item.value" :label="item.label" />
        </t-select>
      </t-form-item>
      <t-form-item label="运费承担方式" v-if="form.delivery === 'delivery'">
        <t-select v-model="form.freightPayer" clearable>
          <t-option v-for="(item, index) in freightBearOptions" :key="index" :value="item.value" :label="item.label" />
        </t-select>
      </t-form-item>
      <t-form-item label="质量(kg)" v-if="form.delivery === 'delivery' || form.unit === 'mass'">
        <t-input-number v-model="form.mass" placeholder="请输入" clearable />
      </t-form-item>
      <t-form-item label="体积-长度(m)"
        v-if="form.delivery === 'delivery' || form.unit === 'volume' || form.unit === 'area'">
        <t-input-number v-model="form.length" placeholder="请输入" clearable />
      </t-form-item>
      <t-form-item label="体积-宽度(m)"
        v-if="form.delivery === 'delivery' || form.unit === 'volume' || form.unit === 'area'">
        <t-input-number v-model="form.breadth" placeholder="请输入" clearable />
      </t-form-item>
      <t-form-item label="体积-高度(m)" v-if="form.delivery === 'delivery' || form.unit === 'volume'">
        <t-input-number v-model="form.height" placeholder="请输入" clearable />
      </t-form-item>
    </t-form>
  </t-dialog>
</template>
<script setup lang="ts">
import { getById, Model, update } from '@/api/userCenter/trade/goods';
import { uuid } from '@/utils/txt';
import { FormRules, MessagePlugin, } from 'tdesign-vue-next';
import { defineExpose, ref } from 'vue';
const visible = ref?.(false);
const loading = ref?.(false);
const formRef = ref?.(null);
// 分类选项
const categoryOptions = ref?.([
]);
// 计量单位选项
const unitOptions = ref?.([
  { label: '件', value: 'item' },
  { label: '质量(kg)', value: 'mass' },
  { label: '体积(ml)', value: 'volume' },
  { label: '时间(分)', value: 'time' },
  { label: '距离(km)', value: 'length' },
  { label: '面积(m2)', value: 'area' },
]);
// 库存减少方式选项
const stockReduceOptions = ref?.([
  { label: '下单减库存', value: 'order' },
  { label: '付款减库存', value: 'pay' },
  { label: '出库减库存', value: 'delivery' },
]);
// 物流选项
const logisticsOptions = ref?.([
  { label: '电子凭证不需要', value: 'eticket' },
  { label: '需要物流', value: 'delivery' },
]);
// 运费承担方式选项
const freightBearOptions = ref?.([
  { label: '卖家承担(包邮)', value: 'shop' },
  { label: '买家承担', value: 'buyer' },
]);
const form = ref?.({
  id: '',
  name: '',
  goodsCategoryId: '',  // 商品分类ID
  goodsSn: '',          // 货号
  startSaleNum: 1,      // 起售数量
  quota: 99999,         // 限购数
  unit: 'item',         // 计量单位：item件
  subStock: 'order',    // 库存减少方式：order下单减库存
  delivery: 'eticket',  // 物流类型：eticket电子凭证不需要
  freightPayer: 'shop', // 运费承担方式：shop卖家承担
  mass: '',            // 商品质量(kg)
  length: '',          // 体积-长度(m)
  breadth: '',         // 体积-宽度(m)
  height: '',           // 体积-高度(m)
  parentId: '',
});
// 表单验证规则
const rules: FormRules = {
  name: [{ required: true, message: '请输入名称', type: 'error' }],
  goodsCategoryId: [{ required: true, message: '请选择分类', type: 'error' }],
  goodsSn: [{ required: true, message: '请输入货号', type: 'error' }],
};
const handleConfirm = async () => {
  if (!formRef) return;
  // 先进行表单验证
  const valid = await formRef?.value?.validate?.();
  if (valid !== true) {
    return;
  }
  loading.value = true;
  try {
    const data = form.value as unknown as Model;
    await update(data, []);
    MessagePlugin?.success?.(`操作成功`);
    visible.value = false;
    emit?.('success');
    formRef?.value?.reset();
  } catch (t) {
  } finally {
    loading.value = false;
  }
};
const handleCancel = () => {
  visible.value = false;
};
const openDialog = async (id?: string) => {
  visible.value = true;
  if (id) {
    loading.value = true;
    form.value.id = id;
    const val = await getById(id);
    if (val && Object?.keys?.(val)?.length) {
      form.value = { ...form?.value, ...val, }
    }
    loading.value = false;
  }
};
const goodsSnGen = () => {
  form.value.goodsSn = uuid()
}
defineExpose({
  openDialog,
});
const emit = defineEmits(['success']);
</script>
<style lang="less" scoped>
/* 可以在这里添加自定义样式 */
</style>
